﻿<div class="layui-card" id="lg-Reserve-FormList">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>活动详情
        <div class="f-r">
            <button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="back()"><i class="fa fa-mail-reply fa-fw"></i>返回</button>
            <button class="layui-btn layui-btn-sm" v-on:click="switchPanel(1)" title="编辑活动"><i class="fa fa-pencil-square-o fa-fw"></i>编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" title="更多操作" v-on:click="switchPanel(0)"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>管理</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <blockquote class="layui-elem-quote">{{model.Title}}</blockquote>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>报名记录</legend>
        </fieldset>
        <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item" v-for="item in items">
                <component :is="GetComponent(item.TypeName)"
                           :items="items"
                           :data="item.Data"
                           v-model:value="table.where[item.Data.Name]"
                           v-show="item.Data.IsRender"
                           val-type="value"></component>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="onSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="OpenColMapControlPanel"><i class="fa fa-cog fa-fw"></i>字段配置</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnExport"><i class="fa fa-file-excel-o fa-fw"></i>导出</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="Refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':table.data&&table.data.length>0&&table.checked.length==table.data.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th v-for="item in showCol" :style="{'width':item.Width?item.Width+'px':'auto'}">{{item.Title}}</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in table.data">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td v-for="column in showCol">{{FormatValue(column.Name,row[column.Name])}}</td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="查看学生详情" v-on:click="onInfo(row)"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除学生" v-on:click="onRemove(row)" v-if="row.IsDelete==0"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="!table.data||table.data.length==0||table.loading">
                    <p v-if="!table.loading">没有数据 ~</p>
                    <p v-if="table.loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-RSV-ActInfo" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div class="fieldWrap" id="colMapWrap" style="position:relative;width:700px;display:none">
        <div class="field-head">
            <div class="lg-form-item">
                <div class="lg-form-td name">字段名</div>
                <div class="lg-form-td">查看</div>
                <div class="lg-form-td">导出</div>
                <div class="lg-form-td">字段宽度</div>
                <div class="lg-form-td">排序（拖动）</div>
            </div>
        </div>
        <div class="field-body">
            <draggable :list="table.cols" handle=".drag" ghost-class="ghost" :force-fallback="true" chosen-class="choseClass" animation="300" delay="2" item-key="1">
                <template #item="{element}">
                    <div class="lg-form-item">
                        <div class="lg-form-td"><input type="text" class="name" v-model="element.Title" /></div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsShow}]"
                                 v-on:click="element.IsShow=!element.IsShow" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsExport}]"
                                 v-on:click="element.IsExport=!element.IsExport" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td"><input type="number" class="width" placeholder="宽度" v-model="element.Width" /></div>
                        <div class="lg-form-td drag" title="调整顺序"><i class="fa fa-bars fa-fw"></i></div>
                    </div>
                </template>
            </draggable>
        </div>
        <div class="field-help">
            <p>*宽度不填写则默认宽度,可点击图标<i class="fa fa-bars fa-fw"></i>拖动位置顺序。</p>
        </div>
        <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':exportAll}]"
             v-on:click="onCheckAll('IsExport')" lay-skin="primary">
            <i class="layui-icon layui-icon-ok"></i><span>全部设为导出</span>
        </div>
        <div class="field-foot">
            <a href="javascript:;" class="layui-btn layui-btn-normal" v-on:click="saveColMaps(1)">保存并关闭</a>
            <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-danger" v-on:click="resetColMaps(1)">重置数据</a>
        </div>
    </div>
    <!--控制面板-->
    <div id="ControlPanel" v-if="model!=null">
        <div :class="['popupShadow',{'act':panel[0]}]" v-on:click="switchPanel(0)"></div>
        <div :class="['popupContainer-right',{'act':panel[0]}]">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>控制面板</h3>
                <span class="fa fa-angle-right" v-on:click="switchPanel(0)"></span>
            </div>
            <div class="popupContent">
                <fieldset class="lg-field">
                    <legend>活动确认</legend>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">通道状态：</div>
                        <div class="lg-form-control">
                            <div :class="['lg-form-switch',{'lg-form-onswitch':model.IsConfirm}]" v-on:click="onModelSwitch('IsConfirm')">
                                <span></span><i></i>
                            </div>
                        </div>
                    </div>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">确认通知：</div>
                        <div class="lg-form-control">
                            <button class="lg-btn lg-btn-sm" v-on:click="onSendConfirmSms"><i class="fa fa-fw fa-envelope-o"></i>发送</button>
                        </div>
                    </div>
                </fieldset>

                <fieldset class="lg-field">
                    <legend>活动签到</legend>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">通道状态：</div>
                        <div class="lg-form-control">
                            <div :class="['lg-form-switch',{'lg-form-onswitch':model.IsOpenSign}]" v-on:click="onModelSwitch('IsOpenSign')">
                                <span></span><i></i>
                            </div>
                        </div>
                    </div>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">允许未报名签到：</div>
                        <div class="lg-form-control">
                            <div :class="['lg-form-switch',{'lg-form-onswitch':model.IsAllowEverySignin}]" v-on:click="onModelSwitch('IsAllowEverySignin')">
                                <span></span><i></i>
                            </div>
                        </div>
                    </div>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">签到通知：</div>
                        <div class="lg-form-control">
                            <button class="lg-btn lg-btn-sm" v-on:click="onSendSigninSms"><i class="fa fa-fw fa-envelope-o"></i>发送</button>
                        </div>
                    </div>
                    <div class="lg-form-item lg-field-inline">
                        <div class="lg-form-title">签到码：</div>
                        <div class="lg-form-control">
                            <button class="lg-btn lg-btn-sm" v-on:click="onGetSigninQrCode"><i class="fa fa-fw fa-qrcode"></i>获取</button>
                        </div>
                    </div>
                </fieldset>

            </div>
        </div>
    </div>

    <div id="ControlPanel2" v-if="model!=null">
        <div :class="['popupShadow',{'act':panel[1]}]" v-on:click="switchPanel(1)"></div>
        <div :class="['popupContainer-right',{'act':panel[1]}]">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>编辑活动</h3>
                <span class="fa fa-angle-right" v-on:click="switchPanel(1)"></span>
            </div>
            <div class="popupContent">
                <form class="layui-form layui-form-pane" action="" id="fm_EditActivity" lay-filter="fm_EditActivity">
                    <div class="layui-form-item hide">
                        <label class="layui-form-label"><i style="color:#f00">*</i>Id</label>
                        <div class="layui-input-block">
                            <input type="text" name="Id" class="layui-input" readonly lay-verify="required" v-model="form.data.Id" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>活动名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="Title" class="layui-input" placeholder="填写活动名称" lay-verify="required" v-model="form.data.Title" />
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">活动简介</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="Intro" class="layui-textarea" v-model="form.data.Intro"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>表单模版</label>
                        <div class="layui-input-block">
                            <select name="FormId" lay-verify="required" v-model="form.data.FormId">
                                <option value=""></option>
                                <option :value="item.Value" v-for="item in form.options">{{item.Text}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>报名起始</label>
                        <div class="layui-input-block">
                            <input type="text" name="StartTime" id="StartTime" autocomplete="off" class="layui-input" lay-verify="required" v-model="form.data.StartTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i style="color:#f00">*</i>报名截止</label>
                        <div class="layui-input-block">
                            <input type="text" name="EndTime" id="EndTime" autocomplete="off" class="layui-input" lay-verify="required" v-model="form.data.EndTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">人数限制</label>
                        <div class="layui-input-block">
                            <input type="text" name="Limit" class="layui-input" placeholder="" v-model="form.data.Limit" />
                        </div>
                        <blockquote class="layui-elem-quote" style="margin-top:2px">0 为不限制人数</blockquote>
                    </div>

                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">活动状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="IsOpen" value="1" lay-skin="switch" lay-text="开放|关闭">
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">签到状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="IsOpenSign" value="1" lay-skin="switch" lay-text="开放|关闭">
                        </div>
                    </div>
                    <div class="layui-form-item signTimeArea" v-show="form.data.IsOpenSign==1">
                        <div class="layui-inline">
                            <label class="layui-form-label"><i v-show="form.data.IsOpenSign" style="color:#f00">*</i>签到时段</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="SignStartTime" id="SignStartTime" autocomplete="off" class="layui-input" v-model="form.data.SignStartTime" :lay-verify="form.data.IsOpenSign==1?'required':''">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" name="SignEndTime" id="SignEndTime" autocomplete="off" class="layui-input" v-model="form.data.SignEndTime" :lay-verify="form.data.IsOpenSign==1?'required':''">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">短信状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" checked="" name="IsSendSms" value="1" lay-skin="switch" lay-text="启用|关闭">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text SmsText" v-show="form.data.IsSendSms==1">
                        <label class="layui-form-label">短信内容</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="SmsText" class="layui-textarea" v-model="form.data.SmsText"></textarea>
                        </div>
                        <blockquote class="layui-elem-quote" style="margin-top:2px">内容为空则使用默认模板内容</blockquote>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="bt_EditActivity">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="ControlPanel3" v-if="model!=null">
        <div :class="['popupShadow',{'act':panel[2]}]" v-on:click="switchPanel(2)"></div>
        <div :class="['popupContainer-right',{'act':panel[2]}]">
            <div class="popupTitle">
                <h3><i class="fa fa-cog fa-fw" aria-hidden="true"></i>报名详情</h3>
                <span class="fa fa-angle-right" v-on:click="switchPanel(2)"></span>
            </div>
            <div class="popupContent">
                <lg-form :data="info.formData" v-on:submit="" bt-text="提交编辑" :render-type="1"></lg-form>
            </div>
        </div>
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js';
    var page = frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        ready: false,
                        model: {
                            Id: @ViewBag.id,
                        },
                        formItems:[],
                        form: {
                            options: [],
                            data: {}
                        },
                        items: [],
                        table: {
                            cols: [],
                            checked: [],
                            data: [],
                            where: {
                                ActivityId: @ViewBag.id,
                                page: 1,
                                limit: 10
                            },
                            loading: false
                        },
                        panel: [false, false,false],
                        states: {},
                        info:{
                            formData:[]
                        }
                    }
                },
                computed: {
                    showCol: function() {
                        return this.table.cols.filter(p => p.IsShow);
                    },
                    exportCol: function() {
                        return this.table.cols.filter(p => p.IsExport);
                    },
                    exportFiledCount: function() {
                        var checkCount = this.table.cols.filter(p => p.IsExport).length;
                        var count = this.table.cols.length;
                        return "(" + checkCount + "/" + count + ")";
                    },
                    exportAll: function() {
                        var checkCount = this.table.cols.filter(p => p.IsExport).length;
                        var count = this.table.cols.length;
                        return checkCount == count;
                    }
                },
                mounted: async function() {
                    this.GetColMaps();
                    await this.Init();
                    this.GetWhereItemsFromFormModel();
                    this.layInit();
                },
                methods: {
                    back: function () {
                        frame.Back(page.url, res => {
                            res.reload();
                        })
                    },
                    Init: async function() {
                        try {
                            var p1 = await this.GetActivityModel();
                            if (p1.code != 0) {
                                layer.msg(p1.msg, { icon: 2 });
                                return false;
                            }
                            var p2 = await this.GetApplys();
                            if (p2.code != 0) {
                                layer.msg(p2.msg, { icon: 2 });
                                return false;
                            }
                            var p3= await this.GetForm();
                            if(p3.code==0){
                                console.log(p3);
                                this.formItems=freeForm.toJson(p3.data.Items,[]);  
                                console.log(this.formItems);
                            }else{
                                return false
                            }
                            var p4 = await this.GetFormsForOption();
                            this.ready = true;

                        } catch (e) {
                            layer.msg("数据初始化失败,请联系管理员检查！", { icon: 2 })
                        }

                    },
                    layInit: function() {
                        var that = this;
                        var form = layui.form;
                        form.on('submit(bt_EditActivity)', function(d) {
                            var data = d.field;
                            that.PostEditActivity(data);
                            return false;
                        })
                        form.on("switch", function(data) {
                            var name = data.elem.name;
                            var val = data.value;
                            var checked = data.elem.checked;
                            that.form.data[name] = checked ? 1 : 0;
                        })
                        laydate.render({
                            elem: '#SignStartTime',
                            type: "datetime",
                            done: res => {
                                that.form.data["SignStartTime"] = res;
                            }
                        });
                        laydate.render({
                            elem: '#SignEndTime',
                            type: "datetime",
                            done: res => {
                                that.form.data["SignEndTime"] = res;
                            }
                        });
                        laydate.render({
                            elem: '#StartTime',
                            type: "datetime",
                            done: res => {
                                that.form.data["StartTime"] = res;
                            }
                        });
                        laydate.render({
                            elem: '#EndTime',
                            type: "datetime",
                            done: res => {
                                that.form.data["EndTime"] = res;
                            }
                        });
                    },
                    GetWhereItemsFromFormModel: async function() {
                        lg.requestAsync({
                            url: "/api/sys/reserve/GetFormModel",
                            data: { id: this.model.FormId }
                        }).then(res => {
                            if (res.code == 0) {
                                this.items = freeForm.toJson(res.data.Items, []).filter(p => p.Data.IsWhere);
                                this.items.push({
                                    TypeName: "Select",
                                    Data: new freeForm.types.Select.model({
                                        "Title": "确认状态",
                                        "Name": "ConfirmState",
                                        "Value": "",
                                        "Options": [
                                            { "Text": "不限", "Value": "", "Id": "752815", "ControlItems": [], "Icon": "", "NeedOtherValue": false },
                                            { "Text": "参加", "Value": "1", "Id": "0216417734134410", "ControlItems": [], "Icon": "", "NeedOtherValue": false },
                                            { "Text": "不参加", "Value": "2", "Id": "212871", "ControlItems": [], "Icon": "", "NeedOtherValue": false },
                                            { "Text": "未确认", "Value": "0", "Id": "151765", "ControlItems": [], "Icon": "", "NeedOtherValue": false }
                                        ]
                                    })
                                })
                                this.items.push({
                                    TypeName: "Select",
                                    Data: new freeForm.types.Select.model({
                                        "Title": "签到",
                                        "Name": "IsSignin",
                                        "Value": "",
                                        "Options": [
                                            { "Text": "不限", "Value": "", "Id": "898881", "ControlItems": [], "Icon": "", "NeedOtherValue": false },
                                            { "Text": "已签", "Value": "1", "Id": "5157747321303710", "ControlItems": [], "Icon": "", "NeedOtherValue": false },
                                            { "Text": "未签", "Value": "0", "Id": "658767", "ControlItems": [], "Icon": "", "NeedOtherValue": false }]
                                    })
                                });
                                for (let i in this.items) {
                                    this.items[i].Data.Required = false;
                                }
                            }
                        })
                    },
                    GetComponent: function(key) {
                        return freeForm.types[key].component.name;
                    },
                    GetActivityModel: async function() {
                        return await lg.requestAsync({
                            url: "/api/sys/reserve/GetActivity",
                            data: { id: this.model.Id }
                        }).then(res => {
                            if (res.code == 0) {
                                this.model = res.data;
                                this.form.data = lg.obj.copy(res.data, []);
                            }
                            return res;
                        }).catch(error => {
                            return { code: 100, msg: error };

                        })
                    },
                    GetApplys: async function() {
                        this.table.loading = true;
                        this.table.data = [];
                        return await lg.requestAsync({
                            url: "/api/sys/reserve/getapplylist",
                            data: this.table.where,
                            complete: res => {
                                this.table.loading = false;
                            }
                        }).then(res => {
                            if (res.code == 0) {
                                this.table.data = this.FormatData(res.data);
                                this.setPage(res.count)
                            } else {
                                layer.msg(res.msg, { icon: 2 });
                            }
                            return res;
                        }).catch(error => {
                            return { code: 100, msg: error };

                        })
                    },
                    setPage: async function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-RSV-ActInfo'
                            , curr: that.table.where.page
                            , limit: that.table.where.limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.table.where.page = obj.curr;
                                    that.table.where.limit = obj.limit;
                                    that.GetApplys();
                                }
                            }
                        });
                    },
                    GetFormsForOption: async function() {
                        await lg.requestAsync({
                            url: "/api/sys/reserve/GetFormsForOption",
                            method: "post"
                        }).then(res => {
                            if (res.code == 0) {
                                this.form.options = res.data;
                            }
                        })
                    },
                    GetForm:async function(){
                        return await lg.requestAsync({
                            url: "/api/sys/reserve/GetFormModel",
                            data: {
                                id: this.model.FormId
                            }
                        })
                    },
                    GetColMaps: function() {
                        lg.request({
                            url: "/api/sys/reserve/GetColMaps",
                            data: { id: this.model.Id },
                            success: res => {
                                if (res.code == 0) {
                                    this.table.cols = res.data;
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    PostEditActivity: function(data) {
                        if (!data.IsOpenSign) {
                            data.IsOpenSign = 0;
                        }
                        if (!data.IsSendSms) {
                            data.IsSendSms = 0;
                        }
                        lg.request({
                            url: "/api/sys/reserve/EditActivity",
                            data: data,
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.switchPanel(1);
                                    this.model = lg.obj.copyData(this.model, this.form.data);
                                    layer.msg("编辑成功！", { icon: 1 })
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    FormatData: function(data) {
                        if (data) {
                            for (let i in data) {
                                var row = data[i];
                                var formData = lg.convert.toJson(row.FormData, null);
                                if (formData) {
                                    for (let key in formData) {
                                        var val = formData[key];
                                        if (val == 'lg-no-render') {
                                            val = "";
                                        }
                                        else {
                                            if (typeof val == "object") {
                                                val = val.Value || val.value;
                                            } else {
                                                var obj = lg.convert.toJson(val, null);
                                                if (obj) {
                                                    val = val = obj.Value || obj.value;
                                                }
                                            }

                                        }
                                        row[key] = val;
                                    }
                                }
                            }
                        }
                        return data;
                    },
                    FormatValue: function(key, val) {
                        if (key == "PayState") {
                            switch (val) {
                                case 1:
                                    return "待支付";
                                case 2:
                                    return "已支付";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "PassState") {
                            switch (val) {
                                case 1:
                                    return "已录取";
                                case 2:
                                    return "未录取";
                                case 3:
                                    return "待定";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "Tuition") {
                            switch (val) {
                                case 1:
                                    return "待缴费";
                                case 2:
                                    return "预缴费";
                                case 3:
                                    return "已缴费";
                                case 4:
                                    return "申请退费";
                                case 5:
                                    return "已退费";
                                case 6:
                                    return "放弃缴费";
                                default:
                                    return "";
                            }
                        }
                        else {
                            return val;
                        }
                    },
                    Refresh: function() {
                        this.table.where.page = 1;
                        this.GetApplys();
                    },
                    OnExport: function() {
                        if (this.states.exoprt) {
                            return false;
                        } else {
                            this.states.export = true;
                            var arry = this.table.cols.filter(p => p.IsExport);
                            if (arry.length > 0) {
                                this.exportbtn = false;
                                var obj = {};
                                for (let i in arry) {
                                    obj[arry[i].Name] = arry[i].Title
                                }
                                lg.getFile({
                                    url: "/api/sys/reserve/exportApply",
                                    fileName: "报名数据-" + lg.GetDate("yyyyMMddHHmmss"),
                                    data: this.table.where
                                });
                                this.states.export = false;
                            } else {
                                layer.msg("请选择列后再执行导出！", { icon: 2 })
                            }
                        }

                    },
                    OnEdit: function(item) {
                        frame.NavigateTo({
                            url: "/lgm/reserve/form/edit/" + item.Id,
                            title: "表单设置"
                        })
                    },
                    OnDelete: function(item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确认执行?", function(index) {
                            layer.close(index);
                            lg.request({
                                url: "/api/sys/reserve/deleteForm",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("删除成功！", { icon: 1 });
                                        that.GetForms();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            })
                        })
                    },
                    Check: function(item) {
                        var use = item.IsUsing == 1 ? 0 : 1;
                        lg.request({
                            url: "/api/sys/reserve/CheckForm",
                            method: "post",
                            data: { id: item.Id, IsUsing: use },
                            success: res => {
                                if (res.code == 0) {
                                    item.IsUsing = use;
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    SetDefault: function(item) {
                        if (item.IsDefault != 1) {
                            lg.request({
                                url: "/api/sys/reserve/SetFormDefault",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        this.GetForms();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        } else {
                            layer.msg("当前项已经是默认表单", { icon: 2, anim: 6 })
                        }

                    },
                    OpenColMapControlPanel: function() {
                        layer.open({
                            type: 1,
                            title: "字段配置",
                            content: $("#colMapWrap")
                        })
                    },
                    saveColMaps: function(isClosePanel) {
                        var _cols = JSON.stringify(this.table.cols);
                        lg.request({
                            url: "/api/sys/reserve/SaveColMaps",
                            method: "post",
                            data: { id: this.model.Id, ColMaps: _cols },
                            success: res => {
                                if (res.code == 0) {
                                    if (isClosePanel == 1) {
                                        layer.closeAll();
                                    }
                                    layer.msg("保存成功！", { icon: 1 });
                                }
                            }
                        })
                    },
                    resetColMaps: function() {
                        lg.request({
                            url: "/api/sys/reserve/ResetColMaps",
                            data: { id: this.model.Id },
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.table.cols = res.data;
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    isChecked: function(item) {
                        return this.table.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function(item) {
                        if (this.isChecked(item)) {
                            this.table.checked = this.table.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.table.checked.push(item);
                        }
                    },
                    onRowCheckAll: function() {
                        if (this.table.data && this.table.data.length > 0) {
                            var b = this.table.checked.length == this.table.data.length;
                            if (b) {
                                this.table.checked = []
                            } else {
                                var arry = [];
                                for (let i in this.table.data) {
                                    arry.push(this.table.data[i]);
                                }
                                this.table.checked = arry;
                            }
                        }
                    },
                    onCheckAll: function(attr) {
                        var b = false;
                        var checkCount = this.table.cols.filter(p => p[attr]).length;
                        var count = this.table.cols.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.table.cols) {
                            this.table.cols[i][attr] = !b;
                        }
                    },
                    switchPanel: function(index, state) {
                        if (state == undefined) {
                            this.panel[index] = !this.panel[index];
                        } else {
                            this.panel[index] = state
                        }
                        if (index == 1 && this.panel[index]) {
                            this.form.data = lg.obj.copy(this.model, []);
                            layui.form.render();
                            layui.form.val("fm_EditActivity", this.form.data)
                        }
                    },                  
                    onModelSwitch: function(key) {
                        var postData = {};
                        postData.Id = this.model.Id;
                        postData[key] = this.model[key] == 1 ? 0 : 1;
                        lg.request({
                            url: "/api/sys/reserve/EditActivity",
                            data: postData,
                            method: "post",
                            success: res => {
                                if (res.code == 0) {
                                    this.model[key] = postData[key];
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    onSendConfirmSms: function() {
                        var that = this;
                        layer.confirm("通知将只针对没有确认状态的目标发送，是否确认继续执行？", function(box) {
                            layer.close(box);
                            lg.requestAsync({
                                url: "/api/sys/reserve/sendConfirmSms",
                                method: "post",
                                data: { activityid: that.model.Id }
                            }).then(res => {
                                if (res.code == 0) {
                                    layer.msg(res.msg, { icon: 1 });
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            })
                        })
                    },
                    onSendSigninSms: function() {
                        var that = this;
                        layer.confirm("通知将只针对没有签到记录且确认参加的目标发送，是否确认继续执行？", function(box) {
                            layer.close(box);
                            lg.requestAsync({
                                url: "/api/sys/reserve/sendSigninSms",
                                method: "post",
                                data: { activityid: that.model.Id }
                            }).then(res => {
                                if (res.code == 0) {
                                    layer.msg(res.msg, { icon: 1 });
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            })
                        })
                    },
                    onGetSigninQrCode: function() {
                        var htm = "<div class='codeLoadWrap'><img src='{$qrocde}' /><br/><span style='line-height:50px'>{$url}</span></div>"
                        lg.requestAsync({
                            url: "/api/sys/reserve/GetSigninQrcode",
                            data: { activityid: this.model.Id, size: 250 }
                        }).then(res => {
                            if (res.code == 0) {
                                htm = htm.replace("{$qrocde}", res.data.img).replace("{$url}", res.data.url);
                                layer.open({
                                    type: 1,
                                    area: ['400px', '400px'],
                                    content: htm
                                })
                            }
                            else {
                                layer.msg(res.msg, { icon: 2 })
                            }
                        })
                    },
                    onSearch: function() {
                        this.table.where.page = 1;
                        this.GetApplys();
                    },
                    onInfo:function(item){
                        this.switchPanel(2);
                        var items=freeForm.copyItems(this.formItems);
                        freeForm.setValue(items,JSON.parse(item.FormData));
                        this.info.formData=items;
                        console.log(items);
                        console.log( this.formItems)
                    },
                    onRemove:function(item){
                        var that=this;
                        layer.confirm("删除不可恢复，是否确认继续执行？",function(box){
                            layer.close(box);
                            lg.request({
                                url: "/api/sys/reserve/DeleteApply",
                                data:{id:item.Id},
                                method:"post",
                                success:res=>{
                                    if(res.code==0){
                                        that.GetApplys();
                                    }else{
                                        layer.msg(res.msg,{icon:2})
                                    }
                                }
                            })
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            app.component('draggable', window.vuedraggable);
            this.vm = app.mount("#lg-Reserve-FormList");
        },
        methods: {
            refresh: function() {
                this.vm.GetForms();
            }
        }
    }).mount();
</script>